<template>
	<h4 class="title_lv2">在同一个选择器里选择日期和时间</h4>
	<div class="statement">
		<ol>
			<li>通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。 快捷方式的使用方法与 Date Picker 相同。</li>
		</ol>
	</div>
	<div class="demo-datetime-picker">
		<div class="block">
			<el-date-picker v-model="value1" type="datetime" placeholder="Select date and time" />
		</div>
		<div class="block">
			<el-date-picker
				v-model="value2"
				type="datetimerange"
				start-placeholder="Start date"
				end-placeholder="End date"
				format="YYYY-MM-DD HH:mm:ss"
				date-format="YYYY/MM/DD ddd"
				time-format="A hh:mm:ss"
			  />
		</div>
	</div>
	<div class="hr das"></div>

	<!-- 页面代码 源码 -->
	<dropWrap key="oreo">
	  <pre><code class="language-js">{{ httpCode }} </code></pre>
	</dropWrap>
	<!-- 页面代码 源码 -->

</template>

<script lang="ts" setup>
	import { ref, onMounted, nextTick } from "vue";
	import dropWrap from "../dropWrap.vue";
	import Prism from "prismjs";
	import "../prism.css";
	const value1 = ref('')
	const value2 = ref('')
	const value3 = ref('')
	const defaultTime = new Date(2000, 1, 1, 12, 0, 0)

	const shortcuts = [
		{
			text: 'Today',
			value: new Date(),
		},
		{
			text: 'Yesterday',
			value: () => {
				const date = new Date()
				date.setTime(date.getTime() - 3600 * 1000 * 24)
				return date
			},
		},
		{
			text: 'A week ago',
			value: () => {
				const date = new Date()
				date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
				return date
			},
		},
	]
	let httpCode = ref<string>(`
	*通用方法
	<el-date-picker v-model="value3" type="datetime" placeholder="Select date and time" :default-time="defaultTime" />
	
	*开始时间和结束时间
	<el-date-picker
		v-model="value2"
		type="datetimerange"
		start-placeholder="Start date"
		end-placeholder="End date"
		format="YYYY-MM-DD HH:mm:ss"
		date-format="YYYY/MM/DD ddd"
		time-format="A hh:mm:ss"
	  />
`);

/*
生命周期
*/
onMounted(() => {
	nextTick(() => {
		Prism.highlightAll();
	});
});
</script>
<style scoped>
	.demo-datetime-picker {
		display: flex;
		width: 100%;
		padding: 0;
		flex-wrap: wrap;
	}

	.demo-datetime-picker .block {
		padding: 30px 0;
		text-align: center;
		border-right: solid 1px var(--el-border-color);
		flex: 1;
	}

	.demo-datetime-picker .block:last-child {
		border-right: none;
	}

	.demo-datetime-picker .demonstration {
		display: block;
		color: var(--el-text-color-secondary);
		font-size: 14px;
		margin-bottom: 20px;
	}
</style>